<template>
  <div class="page">
    <div class="head">
      <h1>炼丹炉</h1>
    </div>
    <div class="goods">
      <div :class="{'active': item.value == goods}" v-for="(item,index) in goodsItems" @click="changeGoods(item.value)" :key="'goods-'+index">{{ item.name }}</div>
    </div>
    <div class="panel" v-if="loaded">
      <div class="items">
        <ul class="item">
          <li>
            <img src="/static/reborn-book.svg" alt="">
            <p>复活书*{{dict[goods].materialFirst}}</p>
          </li>
          <li>
            <img src="/static/magic-herb.svg" alt="">
            <p>神仙草*{{dict[goods].materialSecond}}</p>
          </li>
        </ul>
        <div class="arrow"></div>
        <ul class="item">
          <li>
            <img src="/static/reborn-stone.svg" alt="">
            <p>复活石*1</p>
            <span>成功率：{{dict[goods].proportion}}%</span>
          </li>
        </ul>
      </div>
    </div>
    <box gap="20px 8px">
      <x-button type="warn" @click.native="compose()">合成</x-button>
    </box>
    <div v-transfer-dom>
      <popup v-model="showPack" position="right">
        <div class="mypack">
          <h2>我的背包</h2>
          <ul class="myitems">
            <li v-for="(item,index) in 5" :key="index">
              <div class="name">
                <img src="/static/peach.svg" alt="">
                <span>神仙草</span>
              </div>
              <div class="num">数量：121</div>
            </li>
          </ul>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
  import {
    XButton,
    Box,
    Popup,
    TransferDom,
    Alert
  } from 'vux'
  export default {
    directives: {
      TransferDom
    },
    components: {
      XButton,
      Box,
      Popup,
      Alert
    },
    data() {
      return {
        goodsItems: [{
          name: '复活石',
          value: 1
        }],
        goods: 1,
        showPack: false,
        dict: [],
        loaded: false
      }
    },
    mounted() {
      this.$nextTick(function() {
        this.getDict();
      });
    },
    methods: {
      getDict() {
        this.$http
          .get(`/travel/propCompoundDict/${this.goods}`)
          .then(res => {
            // this.$vux.toast.text(res.msg)
            if (res.code == 200) {
              this.dict[this.goods] = res.result
              this.loaded = true
            } else {}
          })
          .catch(function(error) {});
      },
      compose() {
        this.$http
          .post(`/travel/propCompound`, {
            num: 1,
            id: this.goods
          })
          .then(res => {
            if (res.code == 200) {
              var content = res.result ? '合成成功' : '合成失败'
              this.$vux.alert.show({
                title: '结果',
                content: content
              })
            } else {
              this.$vux.toast.text(res.msg)
            }
          })
          .catch(function(error) {});
      },
    },
  }
</script>

<style lang="scss" scoped>
  @media only screen and (min-width: 320px) {
    .goods {
      div {
        padding: 0 10px;
      }
    }
  }
  @media only screen and (min-width: 400px) {
    .goods {
      div {
        padding: 0 20px;
      }
    }
  }
  .goods {
    display: flex;
    padding: 0 20px;
    height: 25px;
    position: relative;
    bottom: -1px;
    div {
      margin-right: 5px;
      background: #f7f7f7;
      font-size: 12px;
      box-shadow: 1px 0px 12px 0px rgba(158, 158, 158, 0.3);
      border-radius: 3px;
      height: 25px;
      line-height: 25px;
      color: $grey;
      white-space: nowrap;
      transition: all .5s;
    }
    .active {
      height: 28px;
      line-height: 28px;
      font-size: 14px;
      background: $tmdark;
      color: #fff;
    }
  }
  .items {
    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      li {
        margin: 0 15px;
        text-align: center;
        img {
          width: 60px;
          height: 60px;
          // background: #ccc;
        }
        span {
          font-size: 12px;
          color: $grey;
        }
      }
    }
    .arrow {
      background: url(/static/arrow.svg) no-repeat 50%;
      width: 40px;
      height: 40px;
      background-size: contain;
      margin: 20px auto;
    }
  }
  .mypack {
    padding: 12px;
    width: 250px;
  }
  .myitems {
    li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      .name {
        display: flex;
        align-items: center;
        img {
          margin-right: 5px;
        }
      }
    }
  }
</style>
